<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body></body>
<script>
  /*
      从输入url到渲染出页面的整个过程

      1.资源的形式：html、css、js、图片、视频、音频
      加载过程
      1.DNS解析：域名 -> IP地址
      2.浏览器根据IP地址向服务器发送http请求
      3.服务器处理http请求，并返回给浏览器
      渲染过程
      1.根据HTML代码生成DOM Tree
      2.根据CSS代码生成CSSOM Tree
      3.将DOM和CSSOM合并成Render Tree（渲染树），根据渲染树进行渲染
      4.遇到script标签，浏览器会停止渲染，并执行js代码，执行完毕后，继续渲染,直至把Render tree渲染完成
  
  

  */
  // window.onload 和  DOMContentLoaded的区别
  window.addEventListener('load', function () { // 页面的全部资源加载完成才会执行，包括图片、视频等
    console.log('window load');
    
  });
  document.addEventListener('DOMContentLoaded', function () {
    console.log('DOMContentLoaded');
  });//DOM渲染完即可执行，此时图片、视频等资源可能还未加载完毕
</script>

</html>